<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象类型</title>
    <script>
        function f1() {
            // 在js中,内置了一个Object对象
            // 该对象没有预先定义任何属性和方法
            // 可以使用一切属性与一切方法
            let obj = new Object();
            // 赋值
            // 通过对象名.属性名 = 属性值的方式为指定属性赋值
            // 相当于Java中的set方法
            obj.id = 1;
            obj.name = "admin";
            obj.age = 18;
            // 也可以通过对象名.方法名=函数类型的方式为对象添加一个方法
            obj.play = () => console.log(obj.name + "正在玩耍");
            // obj.play = function(){
            //     console.log(this.name+"正在玩耍");
            // }

            // 取值
            // 可以通过对象名.属性名的方式取值
            // 相当于Java中的get方法
            console.log(obj.id)
            console.log(obj.name)
            console.log(obj.age)
            // 通过对象名.方法名()的方式执行对象方法
            obj.play();
        }

        function f2() {
            let user = new User(1, "admin", "123456");
            console.log(user);
            console.log(typeof user);
        }

        function User(id, username, password) {
            this.id = id;
            this.username = username;
            this.password = password;
        }

        function f3() {
            let user = {"id": 1, "username": "admin", "password": "123456"};
            console.log(user);
            console.log(typeof user);
        }

        function f4() {
            let user = "{'id':1,'username':'admin','password':'123456'}";
            console.log(user)
            console.log(typeof user)
            // 将一个JSON格式的字符串转换成JSON对象
            // 方式一:通过eval方法实现
            let obj = eval("(" + user + ")");
            // let obj = JSON.parse(user);
            console.log(obj)
            console.log(typeof obj)


            // 方式二
            let user2 = '{"id": 2, "username": "jack", "password": "123456"}'
            console.log(user2)
            console.log(typeof user2)
            let obj2 = JSON.parse(user2);
            console.log(obj2);
        }
    </script>
</head>
<body>
<button onclick="f1()">定义方式一</button>
<br>
<button onclick="f2()">定义方式二</button>
<br>
<button onclick="f3()">定义方式三</button>
<br>
<button onclick="f4()">定义方式四</button>
<br>
</body>
</html>